<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.zheng{
			width:1200px;
			height: 1042px;
			margin: 0 auto;
		}
		nav{
			width:100%;
			height: 100px;
			background: red;
			margin: 0 auto;
			position: relative;
		}
		#wangyi{
			float: left;
		}
		#wangyi img{
			margin-left: 20px;
			margin-top: 10px;
			float: left;
		}
		.zi{
			font-size: 24px;
			color: white;
			margin-top: 10px;
			margin-left: 20px;
		}
		.search{
			width: 149px;
			height: 20px;
			border-radius:5px;
			float: left;
			margin-top: 18px;
			margin-left: 110px;
			border: 1px solid white;
			cursor: pointer;
		}
		.zi2{
			color:#9A999C;
			margin: 1px 4px;
			font-size: 16px;
			
		}
		.deng{
			margin-top: 10px;
			margin-left: 110px;
			width:75px;
		}
		.deng #denglutu{
			background: url(img/登陆.png) no-repeat;
			width: 33px;
			height: 33px;
			float: left;
		}
		#denglutu1{
			background: url(img/登陆2.png) no-repeat;
			width: 33px;
			height: 33px;
			float: left;
		}
		.deng,.zi3{
			float: left;
			
		}
		
		.zi3{
			margin-top: 12px;
			font-size:10px;
			margin-left: 5px;
			
		}
		.pifu{
			margin-top: 10px;
			margin-left: 15px;
			float: left;
		}
		.pifu img,.zi4,.pifu input{
			float: left;
		}
		.zi4{
			margin-top: 10px;
			margin-left: 5px;
		}
		.pifu input{
			margin-left: 5px;
			margin-top: 4px;
		}
		.right1{
			float: right;
			margin-right: 90px;
			position: absolute;
			top: 10px;
			right: -45px;
		}
		.sidebar{
			clear: both;
			margin-top: 50px;
			margin-right: 100px;
			float: right;
			width: 400px;
			height: 500px;
			border: 1px solid rosybrown;
		}
		.sidebar .lis1{
			font-size: 30px;
			font-weight: bold;
		}
		.sidebar aside{
			clear: both;
			
		}
		#geci #lyric{
			width: 100%;
			height: 445px;
			background: wheat;
			overflow: auto;
		}
		.sidebar aside li{
			list-style: none;
			padding-left: 54px;
			text-align: center;
		}
		#geci .lis2{
			margin-left: -49px;
		}
		.lis2 .zhuanji,.lis3 .geshou,.lis4 .zhuanji2{
			color: blue;
		}
		.lis2,.lis3,.lis4{
			float: left;
			margin-left: 15px;
		}
		.lis2>pre,.lis3>pre,.lis4>pre{
			float: left;
		}
		.content{
			width: 300px;
			height: 300px;
			border-radius:50%;
			background: black;
			margin: 110px 120px;
		}
		.rotate{
			animation: myrotate 5s linear infinite;/*匀速    一直*/
		}
		@keyframes myrotate{
			from{transform:rotate(0);}
			to{transform:rotate(360deg);}
		}
		.content img{
			margin: 36px;
			width: 230px;
			height: 230px;
			border-radius:50%;
		}
		.fangTu ul li{
			list-style: none;
			display: block;
			width: 30px;
			height: 33px;
			float: left;
			margin-left: 89px;
		}
		.fangTu ul li pre{
			float: left;
			font-size: 19px;
			margin-left: 26px;
			margin-top: -22px;
		}
		.fangTu ul li img{
			float: left;
			width: 25px;
		}
		.fangTulist{
			width: 63px;
			height: 22px;
			border: 2px solid #C1C1C1;
		}
		.xian{
			width:90%;
			height: 1px;
			background: #C1C1C1;
			clear: both;
			margin: 272px auto 0;
		}
		
		
		
		
		.login{
			width: 600px;
			height: 300px;
			background: #5F6368;
			margin: 0 auto;
			position: relative;
			top:100px;
		}
		.login h2{
			text-align: center;
			position: relative;
    		left: -62px;
		}
		.login #closed{
			font-size: 25px;
    		position: absolute;
    		right: 6px;
    		top: -5px;
    		color: white;
		}
		.login #username{
			width: 200px;
			height: 30px;
			margin-top: 25px;
		}
		.login #userpwd{
			width: 200px;
			height: 30px;
			margin-top: 21px;
			margin-left: 101px;
		}
		.login #remmberPwd{
			position: relative;
    		left: -95px;
   	 		top: 41px;
		}
		.login #remmberPwd2{
			position: relative;
    		top: 39px;
    		left: -91px;
		}
		.login #userlogin{
			height: 30px;
    		width: 200px;
    		font-size: 21px;
    		position: relative;
    		left: -292px;
    		top: 100px;
		}
		.bigWin{
                width: 100%;
                height: 153%;
                background-color: black;
                opacity: 0.2;
                position: absolute;
                top: 0;
                left: 0;
            }
        #xiaoshi{
            	display: none;
            }
        .footer{
            	width: 100%;
            	height: 70px;
            	background: red;	
            	margin-top: 20px;
            	
            		
            	
            }
       .footer #lastSong{
        	background: url(img/lastSong.png) no-repeat;
        	width: 33px;
        	height: 33px;
        	display: block;
        }
        .footer #bo{
        	background: url(img/暂停.png) no-repeat;
        	width: 33px;
        	height: 33px;
        	display: block;
        } 
        #zan{
        	background: url(img/播放.png) no-repeat;
        	width: 33px;
        	height: 33px;
        	display: block;
        }
        .footer #nextSong{
        	background: url(img/nextSong.png) no-repeat;
        	width: 33px;
        	height: 33px;
        	display: block;
        }
        
        .footer .left span{
        	float: left;
        	margin: 20px 0 0 20px;
        } 
        .footer .conter{
        	float: left;
        	margin: 25px 0 0 48px;
        }
        .footer .conter #playProgress{
        	width: 557px;
        	margin: 0 5px;
        }
        .footer .voice{
          	float: left;
          	margin: 16px 0 0 20px;
          }
        .footer #Ring{
        	width: 33px;
        	height: 33px;
        	background: url(img/声音2.png) no-repeat;
        	display: block;
        	float: left;
        }
        #jing{
        	width: 33px;
        	height: 33px;
        	background: url(img/静音.png) no-repeat;
        	display: block;
        	float: left;
        }
        .footer .voice #yinProgress{
        	float: left;
        	margin: 7px 0 0 12px;
        }
        .footer .circulate{
        	float: left;
        	width: 33px;
        	height: 33px;
        	background: url(img/顺序循环.png) no-repeat;
        	margin: 13px 0 0 10px;
        }
        .xunhuan{
        	float: left;
        	width: 33px;
        	height: 33px;
        	background: url(img/循环.png) no-repeat;
        	margin: 13px 0 0 10px;
        }
        .danqu{
        	float: left;
        	width: 33px;
        	height: 33px;
        	background: url(img/单曲循环.png) no-repeat;
        	margin: 13px 0 0 10px;
        }
        .footer .desk{
        	float: left;
        	width: 33px;
        	height: 33px;
        	background: url(img/桌面歌词.png) no-repeat;
        	margin: 13px 0 0 13px;
        }
        .footer .history{
        	float: left;
        	width: 33px;
        	height: 33px;
        	background: url(img/查看历史.png) no-repeat;
        	margin: 13px 0 0 26px;
        }
        .boList{
        	width: 642px;
        	height: 200px;
        	margin: 0 auto;
        	position: relative;
        	top: -201px;
        	border:1px solid #00003D;
        	background: #5F6368;
        	display: none;
        }
       .boList .listLeft{
       	float: left;
       	width: 320px;
       }
       .boList .listLeft h2{
       	text-align: center;
       	margin: -48px 0 0 0;
       }
       .boList .listLeft #gequ{
       	margin-left: 20px;
       }
      .boList #shu{
      	    width: 1px;
    		height: 200px;
    		background: wheat;
    		float: left;
    		position: relative;
    		top: -114px;
    		left: 324px;
      }
       .boList .listright{
       	float: right;
       	width: 320px;
       }
       .boList .listright #historylist{
       	margin-left: 25px;
       }
       .boList .listright h2{
         text-align: center;
         margin: -48px 0 0 0;
         }
       .red{
         	color: red;
         }
        #pinglun{
    		margin: 20px 0 0 61px;
    		clear: both;
    		border-bottom: 1px dashed black;
    		width: 1120px;
    		height: 124px;
         }
         #pinglun #ping{
         	width: 1057px;
    		height: 24px;
    		margin-top: 13px;
    		font-size: 16px;
    		margin-left: 18px;
    		padding-left: 11px;
         }
         #pinglun #jingcai{
         	margin:40px 0 0 20px;
         	float: left;
         }
         .listping{
         	margin:15px 0 0 51px;
         	clear: both;
         }
         .listping1{
         	margin-left: 79px;
         }
         .listping ul li{
         	list-style:none;
         	
         }
         #tu1 img{
         	width: 50px;
         	height: 50px;
         	border-radius: 50%;
         	float: left;
         }
         
         #listzi,#listzi1{
         	color: blue;
         }
         .listzi2{
         	float: right;
         }
         .listzi2 span{
         	color: blue;
         	float: left;
         	display: block;
         	margin-left: 10px;
         	line-height: 32px;
         }
         .listzi2 span:nth-child(1){
         	background: url(img/点赞.png) no-repeat;
         	width: 33px;
         	height: 33px;
         	float: left;
         	display: block;
         }
         .listzi1{
         	float: left;
         }
         
         .listping3 li{
         	list-style: none;
         }
         .listping2{
         	clear: both;
    		margin: 59px 0 0 46px;
         }
         .listping3{
         	margin-left: 80px;
         }
         .listzi4{
         	color: blue;
         	float: right;
         }
         .listzi4 span:nth-child(1){
         	background: url(img/点赞.png) no-repeat;
         	width: 33px;
         	height: 33px;
         	float: left;
         	display: block;
         	margin: -5px 19px 0 0;
         }
         .listzi3,.listzi1{
         	color: wheat;
         }
         #navhua{
         	overflow-y: scroll;
         	height: 715px;
         }
	</style>
	<body>
		<div class="zheng">
			<div class="bigWin"></div>
			<audio src=""></audio>
			
			
				<nav>
			<div id="wangyi">
				<img src="img/网易云.png"/>
				<pre class="zi">网易云音乐</pre>
			</div>
			
				<div class="search">
					<pre class="zi2">搜素音乐</pre>
				</div>
				
				<div class="login" >
					<h2>用户登录</h2>
					<span id="closed">x</span>
					<input type="text" name="" id="username" value="" placeholder="用户名"/><br />
					<input type="password" name="" id="userpwd" value="" placeholder="密码"/>
					<input type="checkbox" name="remmberPwd" id="remmberPwd" value="" />
					<span id="remmberPwd2">记住密码</span>
					<button id="userlogin">登录</button>
				</div>
				
				<div class="right1">
					<div class="deng">
					<span id="denglutu"></span>
					<pre class="zi3">登陆</pre>
					</div>
				
				<div class="pifu">
					<img src="img/皮肤.png"/>
					<pre class="zi4">皮肤</pre>
					<input type="color" value="#F00505" id="colorpifu" autofocus/>
				</div>
			</div>
				
		</nav>
			
			
			<div id="navhua">
				
			
		
		<!--歌词-->
		<div class="sidebar">
			<aside id="geci">
				<span class="lis1">11</span>
				<ul>
					<li class="lis2"><pre>专辑:</pre><pre class="zhuanji"></pre></li>
					<li class="lis3"><pre>歌手:</pre><pre class="geshou"></pre></li>
					<li class="lis4"><pre>专辑:</pre><pre class="zhuanji2"></pre></li>
				</ul>
				<!--歌词-->
				<ul id="lyric">
					
				</ul>
			</aside>
		</div>
		<div class="content">
			<img src=""/>
		</div>
		<div class="fangTu">
			<ul>
				<li>
					<div class="fangTulist">
						<img src="img/喜欢.png"/><pre>喜欢</pre>
					</div>
				</li>
				<li>
					<div class="fangTulist">
						<img src="img/收藏.png"/><pre>收藏</pre>
					</div>
				</li>
				<li>
					<div class="fangTulist">
						<img src="img/下载.png"/><pre>下载</pre>
					</div>
				</li>
				<li>
					<div class="fangTulist">
						<img src="img/分享.png"/><pre>分享</pre>
					</div>
				</li>
			</ul>
		</div>
		
		
		<div class="xian"></div>
		
		
		<div id="pinglun">
			<span id="tingyou">听友评论</span><br/>
			<input type="" placeholder="发表评论" name="" id="ping" value="" />
			<span id="jingcai">精彩评论</span>
		</div>
		<div class="listping">
			<span id="tu1"><img src=" "/></span>
			<ul class="listping1">
				<li><span id="listzi">小柠檬&nbsp;:</span>
					<span id="charu1"></span>
				</li>
				<li class="listzi1"></li>
				<li class="listzi2">
					<span id=""></span>
					<span id="">点赞</span>
					<span id="">分享</span>
					<span id="">回复</span>
				</li>
			</ul>
		</div>
		
		
		<div class="listping2">
			<span id="tu1"><img src=" "/></span>
			<ul class="listping3">
				<li><span id="listzi1">小柠檬&nbsp;:</span>
					<span id="charu2"></span>
				</li>
				<li class="listzi3"></li>
				<li class="listzi4">
					<span id=""></span>
					<span id="">点赞</span>
					<span id="">分享</span>
					<span id="">回复</span>
				</li>
			</ul>
		</div>
		
		
	
		</div>
		
		
		
		<!--播放器-->
		<div class="footer">
			<div class="left">
				<span id="lastSong"></span>
				<span id="bo"></span>
				<span id="nextSong"></span>
			</div>
			<div class="conter">
				<span id="startTime">0:00</span>
				<input type="range" id="playProgress" min="0" max="100" value="0"/>
				<span id="endTime">0:03</span>
			</div>
		
	
		<div class="voice">
			<span id="Ring"></span>
			<input type="range" id="yinProgress" step="0.1" id="" value="0.5" min="0" max="1"/>
		</div>
		<!--循环-->
		<div class="xunmo">
			<div class="circulate"></div>
		</div>
		
		<!--歌词-->
		<div class="desk"></div>
		<!--历史记录-->
		<div class="history"></div>
		
		<!--播放列表-->
		<div class="boList">
			<div class="listLeft">
				<h2>播放列表</h2>
				<ol id="gequ">
					
				</ol>
				<span id="shu"></span>
			</div>
			
			<div class="listright">
				<h2>历史记录</h2>
        		<ol id="historylist">
            
        		</ol>
			</div>
		</div>
	</div>
		
	</div>
		
	</body>
	<script src="jquery3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="wangyi.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript"src="bofang.js"></script>
	<script src="data.js" type="text/javascript" charset="utf-8"></script>
</html>
